<template>
  <div class="chart" :id="id" :style="{ width: width, height: height }"></div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  reactive,
  onMounted,
  watch,
  inject,
} from "vue";
export default defineComponent({
  name: "PieChart",
  props: {
    width: {
      type: String,
      default() {
        return "400px";
      },
    },
    height: {
      type: String,
      default() {
        return "400px";
      },
    },
    title: {
      type: String,
      default() {
        return "";
      },
    },
    legendStyle: {
      type: Object,
      default() {
        return {
          bottom: "20px",
          icon: "circle",
          itemWidth: 8, // 图例标记的图形宽度。
          itemGap: 20, // 图例每项之间的间隔。
          itemHeight: 8,
        };
      },
    },
    radius: {
      type: Array,
      default() {
        return ["0%", "50%"];
      },
    },
    center: {
      type: Array,
      default() {
        return ["50%", "50%"];
      },
    },
    color: {
      type: Array,
      default() {
        return [
          "#1D5EE5",
          "#FEC000",
          "#FF6C40",
          "#2D99FF",
          "#505D6F",
          "#AC3AC5",
          "#2CD9C5",
        ];
      },
    },
    label: {
      type: Object,
      default() {
        return {};
      },
    },
    showData: {
      type: Array,
      default() {
        return [
          { value: 250, name: "信息工程学院" },
          { value: 188, name: "环境与资源学院" },
          { value: 156, name: "制造科学学院" },
          { value: 143, name: "土木工程学院" },
          { value: 210, name: "生命科学学院" },
          { value: 335, name: "计算机科学学院" },
          { value: 121, name: "材料学院" },
        ];
      },
    },
  },
  setup(props) {
    let echarts = inject("ec");
    let _props = props as any;
    let id = computed((): string => {
      return "a" + Math.random();
    });
    let legendData = computed(() => {
      return _props.showData.map((item: any) => {
        return item.name;
      });
    });
    let myCharts = reactive({
      dataCharts: null,
    });
    function draw() {
      let charts = null;
      charts = myCharts.dataCharts = (echarts as any).init(
        document.getElementById(id.value)
      );
      let option = {
        title: {
          text: _props.title,
          x: "center",
          top: "5px",
        },
        tooltip: {
          formatter: "{b} : {c} ({d}%)",
          transitionDuration: 0,
        },
        legend: Object.assign(
          {
            textStyle: {
              //图例文字的样式
              fontSize: 12,
            },
            data: legendData.value,
          },
          _props.legendStyle
        ),
        color: _props.color,
        series: {
          // name: "教师名师",
          type: "pie",
          radius: _props.radius,
          center: _props.center,
          label: {
            show: false,
            position: "center",
          },
          data: _props.showData,
        },
      };
      (charts as any).setOption(option);
    }
    onMounted(() => {
      draw();
    });
    watch(_props, () => {
      draw();
    });
    return {
      id,
    };
  },
});
</script>
<style lang="less" scoped>
</style>
